<template>
	<!-- 视图 -->
	<div>
		<div class="Header">购物车</div>
		<div>
			<van-card v-for="item in cartInfo" :key="item.goods_id">
				<template #thumb>
					<div>
						<input type="checkbox" v-model="buy" :value="item.goods_id" class="check1">
						<img :src="item.goods_img">
					</div>
				</template>
				<template #price>
					<div >
						￥{{item.goods_price}}
					</div>
				</template>
				<template #title>
					<div>{{item.goods_name}}</div>
				</template>
				<template #num>
					<van-stepper v-model="item.goods_count" step="1" />
				</template>
			</van-card>
		</div>
		<div class="Footer">
			<van-submit-bar :price="total*100" button-text="支付" :disabled="sum>0?false:true" @submit="submit">
			  <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
			  <template #tip>
			    您的订单为虚拟订单，支付后不发货（请勿支付大额款项）
			  </template>
			</van-submit-bar>
		</div>
	</div>
</template>

<script>
	//引用Vant相关组件
	import Vue from 'vue';
	
	import { Card,Stepper,Checkbox,CheckboxGroup,SubmitBar,Dialog  } from 'vant';
	Vue.use(SubmitBar);
	Vue.use(Stepper);
	Vue.use(Card);
	Vue.use(Checkbox);
	Vue.use(CheckboxGroup);
	// 逻辑
export default{
		data(){
			return{
				cartInfo:[],
				checked: false,
				goodsId:[],
				buy:[],
				buyed:[],
				sum:0
			}
		},
		created(){
			this.$http.get("/api").then(ret=>{
				this.cartInfo=ret.cartInfo
				console.log(this.cartInfo)
				//buyed用来判断取消多选和选择多选
				this.cartInfo.forEach((el) => {
				    this.buyed.push(el.goods_id);
				})
			})
		},
		methods:{
			// 实现全选/全不选
			checkAll() {
			    this.buy = [];
			    if (this.checked) {
			        // 全选
			        this.cartInfo.forEach((el) => {
			            this.buy.push(el.goods_id);
			        });
					
			    }
			},
			//提交事件
			submit(){
				//处理订单号
				let WIDout_trade_no,WIDsubject,WIDtotal_fee
				WIDout_trade_no=new Date()
				let y=WIDout_trade_no.getFullYear()
				let m=WIDout_trade_no.getMonth()+1
				let r=WIDout_trade_no.getDate()
				let s=WIDout_trade_no.getHours()
				let f=WIDout_trade_no.getMinutes()
				let mm=WIDout_trade_no.getSeconds()
				let anynum=parseInt((Math.random()+1)*987654)
				if(m<10){
					m="0"+m
				}
				if(r<10){
					r="0"+r
				}
				if(s<10){
					s="0"+s
				}
				if(f<10){
					f="0"+f
				}
				if(mm<10){
					mm="0"+mm
				}
				let dingdan=y+""+m+""+r+""+s+""+f+""+mm+""+anynum
				
				//处理交易名称
				let jiaoyiming="Vue综合练习（廖路平）"
			
				//处理交易额
				let jiaoyie=this.sum
				let url="https://m.28sjw.com/alipay_wap/alipayapi.php?"+"WIDout_trade_no="+dingdan+"&WIDsubject="+jiaoyiming+"&WIDtotal_fee="+jiaoyie
				Dialog.confirm({
				  title: '支付成功？',
				  message: '如若已经支付，请点击确认',
				})
				  .then(() => {
				  this.$http.get("https://m.28sjw.com/order/orderPayStatusCheck.php?_oid="+dingdan).then(ret=>{
					if( ret.msg=="ok"){
						Dialog.alert({
						  title: '恭喜你！',
						  message: '支付成功',
						}).then(() => {
						  // on close
						});
					}
				  })
				  })
				  .catch(() => {
				    // on cancel
				  });
				window.open(url,"_blank")
			}
		
	},
	watch:{
			// 实现单选变全选
		buy:function(){
			if(this.buy.length==this.buyed.length){
				this.checked=true
			}else{
				this.checked=false
			}
		}
	},
	computed:{
		total:function(){
			// 累加所有`需要购买的`商品的小计
			this.sum = 0;
			this.cartInfo.forEach(el=>{
				if (this.buy.includes(el.goods_id)) {
					this.sum += el.goods_price * el.goods_count;
				}
			})
			// 保留2位小数
			return this.sum.toFixed(2);
		}
	}
	}
</script>

<style scoped>
	/* 样式 */
	.Header{
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 20px;
	}
	.Footer{
		
	}
	.van-card__thumb{
		width: 120px;
	}
	.van-card{
		font-size: 16px;
	}
	.van-card__thumb img{
		border-radius: 0;
	}
	.check1{
		width: 20px;
		height: 20px;
		float: left;
		margin-top: 33px;
		margin-right: 10px;
		border-radius: 50%;
	}
</style>
